<template>
	<view>
		<view class="describe-box">
			<textarea @blur="getinfo" maxlength="4096" class="textarea-info" placeholder-style="color:#9e9e9e" placeholder="请输入驳回理由,恶意驳回会触发封号"></textarea>
			<uploadimgs :imgwidth="132" :imghight="132" :imgnum="imgnum" :imglist="rejectimg" ref="uploadimgs"></uploadimgs>
			<view class="zhongcai">
				<checkbox-group @change="radioChange">
				<label class="radios">
					<checkbox value='1'></checkbox>
					<text>驳回并申请官方介入</text>
				</label>
				</checkbox-group>
			</view>
			<view class='button'  @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgnum: 4, //最大上传的图片数量
				rejectimg: [],
				reject_text: '',
				is_reject: false, //需要客服介入仲裁
				id: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			uni.$on('getimageArr', (data) => {
				this.rejectimg = data
			})
		},
		methods: {
			getinfo(e) {
				this.reject_text = e.detail.value
			},
			radioChange(e){
				this.is_reject =e.detail.value.length>0? 1:0
			},
			submit() {
				if(!this.reject_text ){
					this.$ShowMsg('您未说明驳回情况')
					return
				}
				if( this.rejectimg.length==0){
					this.$ShowMsg('您未提交驳回图片')
					return
				}
				let submitinfo = {
					id: this.id,
					text: this.reject_text,
					img: this.rejectimg,
					is_reject:this.is_reject
				}
				console.log(submitinfo)
				// return
				this.$HttRequest({
					url: '/moonlightOrder/refuse',
					param: submitinfo
				},'POST',true).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.$ShowMsg('提交成功', 'success')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2500)
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg(error.errMsg);
				})
			}
		}
	}
</script>

<style lang="scss">
	.describe-box {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		width: 88%;
		flex-direction: column;
		margin: 0 auto;
		margin-top: 30rpx;

		.zhongcai {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin: 20rpx 0;
			color: #9e9e9e;
			.radios {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				checkbox{
					transform: scale(0.7);
				}
			}
		}

		.textarea-info {
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1rpx solid #f0f0f0;
			border-radius: 10rpx;
			width: 92%;
			height: 140rpx;
			font-size: 28rpx;
		}

		.button {
			border-radius: 20rpx;
			width: 60%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
			margin-right: 0;
			margin: 30rpx auto;
			margin-top: 50rpx;
			background-color: $uni-color-primary;
		}

	}
</style>
